<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform3" @findClicked="findData" />
    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px' }">
      <Table :isLoading="isLoading8" :functionList="true" :tableHeader="tableHeader5" :tableData="dateQueryTableDate" :TableHeight="100" />
      <PageModule :PageData="{ total: total1, buttonS: true }" @pageSizeChange="handleSizeChange1" @pageChange="handleCurrentChange1" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'FinishedGoodsInventoryDetail'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import { InventoryDetailsOfFinishedProducts, brandQury } from '@/api/WarehouseDepartment/WebPages/FinishedGoodsInventoryDetail'
import { ReceivingUnitQuery } from '@/api/WarehouseDepartment/FactoryStorage/InputBottomReceivingIssuingMaterials'
// 品牌查询
const brandQuryMethods = async () => {
  const result = await brandQury()
  formList.value[1].selectOptions = EvaluatesTheArrayReturnValue(result.brands)
}
const isLoading8 = ref(true)
// 领用单位
// const ReceivingUnitQueryMethods = async () => {
// let NewArray = []
// const result = await ReceivingUnitQuery()
// NewArray = result.reduce((arr: any, item: any) => {
//  if (item.deptId && item.deptName) {
//    // 只添加非空的 typeName 和 typeNo
//    arr.push(item.deptId + ' ' + item.deptName)
//  }
//  return arr
// }, [])
// formList.value[2].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
// }

// 厂商获取
const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

// 明细查询
const dateQueryTableDate = ref<any>([])

const dateQueryTableDateParms = ref({
  custom: '',
  deliveryBeginTime: '',
  deliveryEndTime: '',
  lotNo: '',
  orderBeginTime: '',
  orderEndTime: '',
  orderParam: '',
  pageNum: 1,
  pageSize: 40
})

const Launchform3 = (row: any) => {
  dateQueryTableDateParms.value.lotNo = row[0].inputValue
  dateQueryTableDateParms.value.custom = row[1].selectValue
  dateQueryTableDateParms.value.orderBeginTime = row[2].dateValue[0]
  dateQueryTableDateParms.value.orderEndTime = row[2].dateValue[1]
  dateQueryTableDateParms.value.deliveryBeginTime = row[3].dateValue[0]
  dateQueryTableDateParms.value.deliveryEndTime = row[3].dateValue[1]
  InventoryDetailsOfFinishedProductsMethods()
}

const total1 = ref(0)

const handleSizeChange1 = (val: number) => {
  dateQueryTableDateParms.value.pageSize = val
  InventoryDetailsOfFinishedProductsMethods()
}

const handleCurrentChange1 = (val: number) => {
  dateQueryTableDateParms.value.pageNum = val
  InventoryDetailsOfFinishedProductsMethods()
}

const InventoryDetailsOfFinishedProductsMethods = async () => {
  isLoading8.value = true
  const result = await InventoryDetailsOfFinishedProducts(dateQueryTableDateParms.value)
  dateQueryTableDate.value = result.rows
  total1.value = result.total
  isLoading8.value = false
}

onMounted(() => {
  InventoryDetailsOfFinishedProductsMethods()

  //  ReceivingUnitQueryMethods()

  brandQuryMethods()
})

const isLoading5 = ref(false)

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '指令号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '客户',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '客户交期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出',
    bgColor: '#1890FF'
  }
])

const tableHeader5 = ref([
  {
    label: '指令号',
    prop: 'lotNo'
  },
  {
    label: '品牌',
    prop: 'custom'
  },
  {
    label: '订单数',
    prop: 'orderQty'
  },
  {
    label: '下单日期',
    prop: 'orderDate'
  },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '生产线别',
    prop: 'line'
  },
  {
    label: '累计入库',
    prop: 'inQty'
  },
  {
    label: '入库欠数',
    prop: 'inOweQty'
  },
  {
    label: '累计出库',
    prop: 'outQty'
  },
  {
    label: '出库欠数',
    prop: 'outOweQty'
  },
  {
    label: '库存数',
    prop: 'stkQty'
  }
])

const findData = async (find: string) => {
  if (find === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.dateValue = ''
      item.selectValue = ''
    })
  }
  if (find === '导出') {
    const res = (await fileRequest.post(`/stockWork/report/inStock/export`, dateQueryTableDateParms.value)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = decodeURIComponent(`${res.headers['content-disposition'].split('filename=')[1]}`) //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}
</script>

<style lang="less" scoped>
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: rgb(204, 255, 255);
}
.first-column {
  text-align: center; /* 第一列文字居中 */
}
.total-row {
  background-color: #f7e8c7; /* 你可以根据需要调整颜色 */
  font-weight: bold;
}
</style>
